<?php include_once 'usercontroller.php' ?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>Đăng ký thành viên mới</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
        <meta name="description" content="Fancy Sliding Form with jQuery" />
        <meta name="keywords" content="jquery, form, sliding, usability, css3, validation, javascript"/>
        <link href="css/uniform.default.css" type="text/css" rel="stylesheet"/>
        <link rel="stylesheet" href="css/style_form.css" type="text/css" media="screen"/>
        <link href="css/smoothness/jquery-ui-1.8.11.custom.css" type="text/css" rel="stylesheet"/>
        <script type="text/javascript" src="js/jquery-1.6.1.min.js"></script>
        <script type="text/javascript" src="js/sliding.form.js"></script>
         <script type="text/javascript" src="js/jquery.uniform.js"></script>
          <script type="text/javascript" src="js/jquery-ui-1.8.11.custom.min.js"></script>
        <script type="text/javascript" src="js/jquery-ui-timepicker-addon.js"></script>
         <script type="text/javascript">
             $(function(){            
                $("input[type=file]").uniform();
                $("#ngaysinh").datepicker();
               
            });       
        </script>
    </head>
    <style>
        span.reference{
            position:fixed;
            left:5px;
            top:5px;
            font-size:10px;
            text-shadow:1px 1px 1px #fff;
        }
        span.reference a{
            color:#555;
            text-decoration:none;
			text-transform:uppercase;
        }
        span.reference a:hover{
            color:#000;
            
        }
        h1{
            color:#ccc;
            font-size:36px;
            text-shadow:1px 1px 1px #fff;
            padding:20px;
        }
    </style>
    <body>
        <div>            
        </div>
        <div id="content">
            <span class="reference">
                <a href="index.php">Về trang chủ</a>
            </span>
            <h1>Đăng ký thành viên mới 52PM1</h1>
            <div id="wrapper">
                <div id="steps">
                    <form id="formElem" name="formElem" action="" method="post" enctype="multipart/form-data">                        
                        <fieldset class="step">
                            <legend>Account</legend>
                            <input type="hidden" name="checkSubmit" value="submit1"/>
                            <p>
                                <label for="masv">Mã sinh viên</label>
                                <input id="masv" name="masv" type="text" AUTOCOMPLETE=OFF />
                            </p>
                            <p>
                                <label for="username">User name</label>
                                <input id="username" name="username" type="text" AUTOCOMPLETE=OFF  />
                            </p>                            
                            <p>
                                <label for="password">Password</label>
                                <input id="password" name="password" type="password" AUTOCOMPLETE=OFF />
                            </p>
                            <p>
                                <label for="email">Email</label>
                                <input id="email" name="email" placeholder="info@example.net" type="email" AUTOCOMPLETE=OFF />
                            </p>
                        </fieldset>
                        <fieldset class="step">
                            <legend>Thông tin cá nhân</legend>
                            <p>
                                <label for="fullname">Tên đầy đủ</label>
                                <input id="fullname" name="fullname" type="text" AUTOCOMPLETE=OFF />
                            </p>
                            <p>
                                <label for="ngaysinh">Ngày sinh</label>
                                <input placeholder="tháng/ngày/năm" id="ngaysinh" name="ngaysinh" type="text" AUTOCOMPLETE=OFF />
                            </p>
                            <p>
                                <label for="gioitinh">Giới tính</label>
                                <select id="gioitinh" name="gioitinh">
                                    <option>Nam</option>
                                    <option>Nữ</option>
                                    <option>Khác</option>
                                </select>
                            </p>
                            <p>
                                <label for="quequan">Quê quán</label>
                                <input id="quequan" name="quequan" placeholder="" type="text" AUTOCOMPLETE=OFF />
                            </p>
                            <p>
                                <label for="noiohientai">Nơi ở hiện tại</label>
                                <input id="noiohientai" name="noiohientai" placeholder="" type="text" AUTOCOMPLETE=OFF />
                            </p>
                        </fieldset>
                        <fieldset class="step">
                            <legend>Liên lạc</legend>
                            <p>
                                <label for="sodienthoai">Số điện thoại</label>
                                <input id="sodienthoai" name="sodienthoai" placeholder="" type="tel" AUTOCOMPLETE=OFF />
                            </p>
                            <p>
                                <label for="yahoo">Yahoo</label>
                                <input id="yahoo" name="yahoo" type="text" AUTOCOMPLETE=OFF />
                            </p>
                            <p>
                                <label for="skype">Skype</label>
                                <input id="skype" name="skype" type="text" AUTOCOMPLETE=OFF />
                            </p>
                            <p>
                                <label for="facebook">Facebook</label>
                                <input id="facebook" name="facebook" type="text" AUTOCOMPLETE=OFF />
                            </p>
                        </fieldset>
                        <fieldset class="step">
                            <legend>Miêu tả bản thân</legend>
                            <p>
                                <label for="description">Miêu tả bản thân</label>
                                <textarea id="description" name="description"></textarea>
                            </p>
                            <p>
                                <label for="avatar">Avatar</label>
                                <input type="file" name="avatar" value=""/>
                            </p>
							<p>
                                <label for="job">Nghề nghiệp</label>
                                <input id="job" name="job" type="text" AUTOCOMPLETE=OFF />
                            </p>
                        </fieldset>
						<fieldset class="step">
                            <legend>Confirm</legend>
                            <p>
                                    Everything in the form was correctly filled 
                                    if all the steps have a green checkmark icon.
                                    A red checkmark icon indicates that some field 
                                    is missing or filled out with invalid data. In this
                                    last step the user can confirm the submission of
                                    the form.
                            </p>
                            <p class="submit">
                                <button id="registerButton" type="submit">Register</button>
                            </p>
                        </fieldset>                        
                    </form>
                </div>
                <div id="navigation" style="display:none;">
                    <ul>
                        <li class="selected">
                            <a href="#">Tài khoản</a>
                        </li>
                        <li>
                            <a href="#">Thông tin cá nhân</a>
                        </li>
                        <li>
                            <a href="#">Liên lạc</a>
                        </li>
                        <li>
                            <a href="#">Miêu tả</a>
                        </li>
                        <li>
                            <a href="#">Confirm</a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </body>
</html>